<template>
  <div class="HeaderContainer">
    <div class="HeaderLeft">
      <span><router-link to="/main/user"><i class="el-icon-s-home"></i> Home</router-link></span>
    </div>
    <div class="HeaderMiddle"></div>
    <div class="HeaderRight">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <div style="display:flex; ">
            <div>
                <el-avatar size="small" :src="this.circleUrl" style="margin-top: 10px"></el-avatar>
            </div>
            <div style="margin-top: 10px;margin-left: 5px">{{user.nick_name}}</div>
          </div>

        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="details">个人信息</el-dropdown-item>
          <el-dropdown-item>修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "HeaderComponent",
  data(){
    return{
      user:JSON.parse(sessionStorage.getItem("user")),/*JSON格式转js对象*/
      circleUrl: "",
    }
  },
  created() {
    this.getAvatar();
  },
  methods:{
    logout(){
        sessionStorage.clear();
        this.$router.push('/login');
    },
    details(){
      try {
        this.$router.push('/main/personalDetails');
      } catch (e) {
        console.log(e)
      }
    },
    getAvatar(){
      let id = this.user.id
      request.get('/api/files/getAvatar',{params: {id}}).then((res)=>{
        console.log(res.data);
        this.circleUrl=res.data
      })
    }
  }
}
</script>

<style scoped>
/*触发单击事件时*/
.router-link-active {
  text-decoration: none;
}
/*默认样式*/
a {
  text-decoration: none;
  color: dimgray;
}

</style>

<style>
.HeaderContainer {
  background-color: salmon;
  width: auto;
  height: 60px;
  display: flex;
  align-items: center;
  border-bottom: 1px silver solid;
}

.HeaderLeft {
  height: auto;
  width: 200px;
  padding-left: 10px;
  font-weight: bold;
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.HeaderMiddle {
  flex: 1;
}

.HeaderRight {
  height: auto;
  width: 200px;
  text-align: right;
  padding-right: 40px;
}

.el-dropdown-link{
  color: dimgray;
  font-weight: bold;
  font-size: 20px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

</style>
